import { defineComponent, watchEffect, onUnmounted } from 'vue'
import { RouterLink } from 'vue-router'

import { useStore } from '@/store'
import useSize from '@/hooks/useSize'

import icoHome from '@/assets/images/ico-home.jpg'
import icoHomeActive from '@/assets/images/ico-home-active.jpg'
import icoMine from '@/assets/images/ico-mine.jpg'
import icoMineActive from '@/assets/images/ico-mine-active.jpg'

import styles from './styles.module.less'

export default defineComponent({
  name: 'BottomNav',
  props: { zIndex: { type: Number, default: 10 } },

  setup(props) {
    const { layout } = useStore()
    const { elementRef, size } = useSize()

    const unWatch = watchEffect(() => {
      layout.updateLayout({ footerHeight: size.height })
    })
    onUnmounted(() => unWatch())

    return () => (
      <>
        <nav ref={elementRef} class={styles.nav} style={{ zIndex: props.zIndex }}>
          {/* 由于無法在這裡獲取到當前鏈接是否匹配,從而動態設置 style, 因此使用這種方式來切換 active 的圖標 */}

          <RouterLink class={styles.nav_item} activeClass={styles.nav_item_active} to='/'>
            <div class={styles.nav_ico}>
              <i class={styles.ico_normal} style={{ backgroundImage: `url("${icoHome}")` }}></i>
              <i class={styles.ico_active} style={{ backgroundImage: `url("${icoHomeActive}")` }}></i>
            </div>
            <span>首页</span>
          </RouterLink>

          <RouterLink to='/publish' class={styles.publish}>
            <div class={styles.publish_btn}></div>
          </RouterLink>

          <RouterLink class={styles.nav_item} activeClass={styles.nav_item_active} to='/mine'>
            <div class={styles.nav_ico}>
              <i class={styles.ico_normal} style={{ backgroundImage: `url("${icoMine}")` }}></i>
              <i class={styles.ico_active} style={{ backgroundImage: `url("${icoMineActive}")` }}></i>
            </div>
            <span>我的</span>
          </RouterLink>
        </nav>

        <div style={{ height: `${size.height}px` }}></div>
      </>
    )
  },
})
